<template>
  <div class="info-1200 selloffer-detail-content">
          <div class="wy-main-title wy-m-t-40">
                <p>
                      <span><nuxt-link to="./../info/index">首页</nuxt-link></span>
                      <span>  /  绿色食品供应链  /  求购信息  /   </span>
                      <span>{{detail.subject}}</span>
                </p>
          </div>
          <!-- 分割线 -->
          <div class="tender-detail">
              <div class="tender-city">
                  <!-- 商品展示 -->
                  <div class="sell-detail-goods">
                      <div class="goods-pic">
                           <img :src="FileUploadUrl2+concatDetail.companyPath+concatDetail.companyPic">
                      </div>
                      <div class="sell-goods-detail">
                          <h2>{{detail.subject}}</h2>
                          <div class="goods-detail-content">
                                <p>采购商：{{concatDetail.company}}</p>
                                <p>货品类型：{{detail.typeValue}}</p>
                                <p>货品名称：{{detail.name}}</p>
                                <p>购买数量：<span>{{detail.number}}</span><span>{{detail.numberUnitValue}}</span></p>
                          </div>
                      </div>
                  </div>
                  <div class="tend-list-sell">
                    <div class="ant-list ant-list-vertical ant-list-lg ant-list-split">
                      <div class="ant-spin-nested-loading">
                        <div class="ant-spin-container">
                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">联系人</div>
                              <div class="Infor-cont">{{concatDetail.legalPerson}}</div></div>
                          </div>
                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">联系电话</div>
                              <div class="Infor-cont">{{concatDetail.mobile}}</div></div>
                          </div>
                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">电子邮箱</div>
                              <div class="Infor-cont">{{concatDetail.email}}</div></div>
                          </div>
                          <div class="ant-list-item">
                            <div class="ant-list-item-content ant-list-item-content-single">
                              <div class="Infor-title">QQ</div>
                              <div class="Infor-cont">{{concatDetail.qqDisplay}}</div></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                   <!-- 产品说明 -->
                  <div class="tender-notice">
                          <div class="tnder-main-title">产品说明</div>
                          <div class="notice-information">
                              <div>
                                      <p>{{detail.description}}
                                      <!-- <nuxt-link to="/">查看全文>></nuxt-link> -->
                                      </p>
                              </div>
                          </div>
                  </div>
                  <!-- 公司简介 -->
                  <div class="tender-company-profile">
                            <div class="tnder-main-title">公司简介
                                  <nuxt-link :to="`./../../corp`">进入企业主页</nuxt-link>
                            </div>
                            <div class="company-profile-content">
                                    <p>{{concatDetail.companyBriefRemark}}</p>
                            </div>
                  </div>
                <a-form-item :wrapper-col="{ span: 12, offset: 3 }">
                        <a-button v-if="loggedIn" type="primary" html-type="submit" @click="elasticShowModal(concatDetail.userId)">立即沟通</a-button>
                        <a-button v-if="!loggedIn" type="primary" html-type="submit"> <a href="/login">立即沟通</a></a-button>
              </a-form-item>
              </div>
              <div class="tender-concat">
                      <div class="tnder-main-title">联系方式</div>
                      <div class="concat-content">
                          <h3>{{concatDetail.company}}</h3>
                          <div>
                                <span>用户星级</span>
                                <a-rate :defaultValue="2.5" allowHalf />
                          </div>
                      </div>
                      <div class="concat-renzhen">
                           <a-button>{{concatDetail.attestationStatusValue}}</a-button>
                      </div>
                      <!-- 分割线 -->
                      <div class="concat-line"></div>
                      <p>公司地址：{{concatDetail.companyAddress || '暂无'}}</p>
                      <p>详细地址：{{concatDetail.detailAddress || '暂无'}}</p>
                      <p>成立时间：{{concatDetail.companyCreateTime&&concatDetail.companyCreateTime.split(' ')[0]}}</p>
                      <p>联系人：{{concatDetail.legalPerson || '暂无'}}</p>
                      <div class="otehr-product-information">
                        <div class="tnder-main-title">公司其它采购信息</div>
                        <div class="other-product-lsit">
                              <ul>
                                 <li v-for="(item,index) in details" :key="index">
                                   <nuxt-link :to="`./${item.greenFoodPurchaseId}`">
                                   <i></i>
                                   <span class="other-val">{{item.name}}</span>
                                   
                                  </nuxt-link>
                                  </li>
  
                              </ul>
                        </div>
                </div>
              </div>
          </div>
          <!--弹框-->
       <Elastic :type="type"  ref='elastic'></Elastic>
  </div>
</template>

<script>
// import { chainData } from './../../../utils/chainData'
import Elastic from './../../../components/dialog/Elastic'
import { environment } from '@/server/environment'
export default{
 
   components: {
      Elastic,
    },
  data(){
    return{
      detail: {},
      data:{},
      form: this.$form.createForm(this),
      FileUploadUrl2:environment.FileUploadUrl2,
      concatDetail: {
        
      },//联系方式
      details:{},
      type:''
    }
  },
    // async asyncData ({ app, $axios, params, query, error }) {
    //     const returnData = {}
    //     const id = params.id
    //     try {
    //         const { data } = await $axios.$get('/api/info/greenFoodPurchase/getGreenFoodPurchaseDeTail/'+id, { params: {} })
    //         returnData.detail = data;
    //     } catch (err) {
    //         return error({ statusCode: err.code, msg: err.msg })
    //     }
    //     return returnData
    // },
     created(){
        this.id = this.$route.params.id
        this.buyOfferListById(this.id)
        // this.concatUserName(this.detail.username);
        // this.buygreenOtherById(this.detail.greenFoodPurchaseId);
        // this.buyOfferListById()

  },
    watch:{
        '$route':function (){
              this.id = this.$route.params.id
              this.buyOfferListById(this.id)
              this.concatUserName(this.detail.username);
              this.buygreenOtherById(this.detail.greenFoodPurchaseId);
      }
   },
    methods: {
        //获取绿色食品供应详情
      async buyOfferListById (id) {
        // alert(id)
            const res = await this.$store.dispatch('info/buyOfferListById',id)
            //  console.log(res,22222222222)
            if (res.status) {
              this.detail = res.data;
              this.concatUserName(this.detail.username);
              this.buygreenOtherById(this.detail.greenFoodPurchaseId);
            } 
      },
      // 联系方式
      async concatUserName (id) {
          const res = await this.$store.dispatch('info/concatUserName',id)
          // if (res.status) {
            this.concatDetail = res.data;
            // console.log(this.concatDetail,111);
          // } 
      },
      //绿色食品供应其他
      
         async buygreenOtherById (id) {
          const res = await this.$store.dispatch('info/buygreenOtherById',id)
          if(res.status){
                this.details = res.data
          }
          
      },
      //弹框
       elasticShowModal(id){
      //   this.userId = id
        this.$refs.elastic.showModal(id);
    },

  }
}
</script>
<style lang="scss" scoped>
@import "./../../../assets/css/chain/Detail.scss";
			//其他产品
			.otehr-product-information{
				margin-top:40px;
				ul{
					width:360px;
					margin:0;
					padding:0;
					margin:0 auto;
					text-align: left !important;
					li{
						width: 360px;
					  
            margin-top:12px !important;
            height: 10px !important;
            i{
            font-style:normal;
            width:6px;
            height:6px;
            background:#15837A;
            border-radius:50%;
            display:inline-block;
            margin-right:6px;
            vertical-align:middle;
          }
						.other-val{
              
              font-size:14px;
              color:#444444;
              display:inline-block;
						}
					}
				}
			}
</style>